<template>
    <div class="time_content conbox">
		<!--<header >
			<a @click="goback()">
				<img :src="constant.imgUrl +'login/back.png'" alt="返回">
				修改营业时间
			</a>
		</header>-->
		<p class="choosesdaty" id="fistchoose">工作日：已选中 <span v-for="(item,index) in weeks" v-if="item.choose" :key="index">{{item.weekname}}&nbsp; &nbsp;</span></p>
		<checkbox-group class="checkbox_group" @change="checkboxChange">
			<div class="btngroup" v-for="(item,index) in weeks" :key="index">
				<checkbox :value="index+1" :checked="item.choose" class="ckecked" />
				<span class="labtext" :class = "{active:item.choose}">{{item.weekname}}</span>
			</div>
		</checkbox-group>
		<view class="time_group">
			<div class="picker">
				<picker mode="time" :value="fbegin_time"  @change="bindTimeChange">
					<view class="uni-input">{{fbegin_time}}</view>
				</picker>
			</div> <span class="line">~</span>
			<div class="picker">
				<picker mode="time" :value="fend_time"  @change="bindTimewekend">
					<view class="uni-input">{{fend_time}}</view>
				</picker>
			</div>
		</view>
		<p class="choosesdaty">周末：已选中 <span v-for="(item,index) in weeked" v-if="item.choose" :key="index">{{item.weekname}} &nbsp;</span></p>
		<checkbox-group class="checkbox_group" @change="checkboxweek">
			<div class="btngroup" v-for="(item,index) in weeked" :key="index">
				<checkbox :value="item.weekid" :checked="item.choose" class="ckecked" />
				<span class="labtext" :class = "{actives:item.choose}">{{item.weekname}}</span>
			</div>
		</checkbox-group>
		<view class="time_group">
			<div class="picker">
				<picker mode="time" :value="wbegin_time"  @change="bindTimewesatrt">
					<view class="uni-input">{{wbegin_time}}</view>
				</picker>
			</div> <span class="line">~</span>
			<div class="picker">
				<picker mode="time" :value="wend_time"  @change="bindTimeweend">
					<view class="uni-input">{{wend_time}}</view>
				</picker>
			</div>
		</view>
		<footer @click="savebusiness">保存</footer>
    </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { getUser, getBasicUser } from '@/utils/auth.js'
import { editpersondata, getpersondata } from '@/api/persondata'
export default {
	name: 'editTime',
	data() {
		return {
			constant: this.$constant,
			time: '12:01',
			weeks: [
				{ weekname: '周一', choose: true, weekid: 1 },
				{ weekname: '周二', choose: true, weekid: 2 },
				{ weekname: '周三', choose: true, weekid: 3 },
				{ weekname: '周四', choose: true, weekid: 4 },
				{ weekname: '周五', choose: true, weekid: 5 }
			],
			weeked: [
				{ weekname: '周六', choose: true, weekid: 6 },
				{ weekname: '周日', choose: true, weekid: 7 }
			],
			currentDate: '8:00',
			minHour: 0,
			maxHour: 23,
			minute: 0,
			maxute: 59,

			fbegin_time: '08:00',
			fend_time: '19:30',
			wbegin_time: '08:00',
			wend_time: '20:00',
			choosetype: 1,

			nick_name: '', // 共有字段
			address: '',
			areadec: '',
			contact_phone: '',
			wechat_number: '',
			user_picture: '',
			wechat_qrcode: '',
			city_id: '',
			district_id: '',
			province_id: '',
			owner_user_id: '',
			nick_name_short: '', // 企业字段
			business_hours: '',
			role_id: '',
			backstatus: true,
			source: '',
			weekdaysid: [],
			weekend: []
		}
	},
	computed: {

	},
	mounted() {
		this.init()
	},
	onLoad(opcation) {
		this.owner_user_id = opcation.owner_user_id
	},
	methods: {
		// 工作日日期开始选择
		bindTimeChange(e) {
			this.fbegin_time = e.target.value
		},
		// 工作日日期结束选择
		bindTimewekend(e) {
			this.fend_time = e.target.value
		},
		// 周末日期开始选择
		bindTimewesatrt(e) {
			this.wbegin_time = e.target.value
		},
		// 周末日日期结束选择
		bindTimeweend(e) {
			this.wend_time = e.target.value
		},
		checkboxChange(e) {
			let datalist = this.weeks
			let choock = e.detail.value
			datalist.forEach((item, index) => {
				this.weeks[index].choose = false
			})
			choock.forEach((item, index) => {
				this.weeks[item - 1].choose = true
			})
			this.weekdaysid = choock
		},
		checkboxweek(e) {
			let datalist = this.weeked
			let choocks = e.detail.value
			for (let i in datalist) {
				this.weeked[i].choose = false
			}
			choocks.forEach((item, index) => {
				if (item == 6) {
					this.weeked[0].choose = true
				}
				if (item == 7) {
					this.weeked[1].choose = true
				}
			})
			this.weekend = choocks
		},
		init() {
			getUser(true).then(res => {
				let detail = res
				this.user_picture = detail.user_picture
				this.wechat_qrcode = detail.wechat_qrcode
				this.nick_name = detail.nick_name
				this.working_years = detail.working_years
				this.address = detail.address
				// this.stylelist = detail.good_at_style
				this.role_id = detail.role_id
				this.contact_phone = detail.contact_phone
				this.wechat_number = detail.wechat_number
				this.motto = detail.motto
				this.city_id = detail.city_id
				this.district_id = detail.district_id
				this.province_id = detail.province_id
				this.nick_name_short = detail.nick_name_short
				this.business_hours = detail.business_hours
				this.is_display_contact = detail.is_display_contact
				let businestime = JSON.parse(detail.business_hours_config)
				if (businestime.weekdays.start_time) {
					this.fbegin_time = businestime.weekdays.start_time
				}
				if (businestime.weekdays.end_time) {
					this.fend_time = businestime.weekdays.end_time
				}
				if (businestime.weekend.start_time) {
					this.wbegin_time = businestime.weekend.start_time
				}
				if (businestime.weekend.end_time) {
					this.wend_time = businestime.weekend.end_time
				}
				let weekdays = businestime.weekdays.week
				let weekend = businestime.weekend.week
				this.weekdaysid = weekdays
				this.weekend = weekend
				if (weekdays !== 0) {
					for (var i = 0; i <= 4; i++) {
						this.weeks[i].choose = false
					}
					for (var i in weekdays) {
						if (weekdays[i] == 1) {
							this.weeks[0].choose = true
						} else if (weekdays[i] == 2) {
							this.weeks[1].choose = true
						} else if (weekdays[i] == 3) {
							this.weeks[2].choose = true
						} else if (weekdays[i] == 4) {
							this.weeks[3].choose = true
						} else if (weekdays[i] == 5) {
							this.weeks[4].choose = true
						}
					}
				} else {
					var weeks = this.weeks
					for (var i in weeks) {
						weeks[i].choose = false
					}
					this.weeks = weeks
				}
				if (weekend.length !== 0) {
					for (var i = 0; i <= 1; i++) {
						this.weeked[i].choose = false
					}
					for (var i in weekend) {
						if (weekend[i] == 6) {
							this.weeked[0].choose = true
						} else if (weekend[i] == 7) {
							this.weeked[1].choose = true
						}
					}
				} else {
					this.weeked[0].choose = false
					this.weeked[1].choose = false
				}
			})
		},
		msg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none',
				duration: 1500
			})
		},
		savebusiness() {
			var business_hours = {
				weekdays: {
					week: [],
					start_time: '',
					end_time: ''
				},
				weekend: {
					week: [],
					start_time: '',
					end_time: ''
				}
			}
			business_hours.weekdays.start_time = this.fbegin_time
			business_hours.weekdays.end_time = this.fend_time
			business_hours.weekend.start_time = this.wbegin_time
			business_hours.weekend.end_time = this.wend_time
			business_hours.weekdays.week = this.weekdaysid
			business_hours.weekend.week = this.weekend
			let params = {
				user_picture: this.user_picture,
				province_id: this.province_id,
				city_id: this.city_id,
				district_id: this.district_id,
				address: this.address + this.areadec,
				wechat_qrcode: this.wechat_qrcode,
				is_display_contact: this.is_display_contact,
				working_years: this.working_years,
				nick_name: this.nick_name,
				wechat_number: this.wechat_number,
				contact_phone: this.contact_phone,
				nick_name_short: this.nick_name_short,
				business_hours_config: JSON.stringify(business_hours)
			}
			editpersondata(params).then((res) => {
				if (res.status == 'success') {
					this.msg(res.data)
					setTimeout(function() {
						/* uni.navigateTo({  // 特色服务编辑
							url: `/pages/persondata/index?owner_user_id=${this.owner_user_id}`
						})*/
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				} else {
					this.msg(res.errors.message)
				}
			})
		}
	}
}
</script>

<style scoped>
	.time_content{
		width: 100%;
		height: 100%;
		float: left;
		background: white;
	}
	.choosesdaty{
		margin-left: 10%;
		margin-top: 8%;
		margin-bottom: 3%;
		clear: both;
		width:80%;
		float:left;
	}
	.choosesdaty span{
		display: inline-block;
		margin-left: 10px;
	}
	.checkbox_group{
		float: left;
		width: 80%;
		margin-left: 10%;
		margin-bottom: 40px;
	}
	.btngroup{
		width: 100px;
		height: 50px;
		float: left;
		margin-left: 15px;
		border-radius: 45px;
	}
	.checkbox_group .btngroup:nth-child(1) {
		margin-left: 0;
	}
	.checkbox_group .ckecked{
		width: 100px;
		height:50px;
		z-index: 999;
		opacity: 0;
		float: left;
		position: absolute;
		background: green;
	}
	.checkbox_group .labtext{
		width: 79px;
		height:50px;
		left: 0;
		float: left;
		font-size: 26px;
		text-align: center;
		line-height: 50px;
		background: white;
		border-radius: 5px;
		border:1px solid #666666;
	}
	.checkbox_group .active{
		color:white;
		border:none;
		background: #FF9800;
		border:1px solid #FF9800;
	}

	.checkbox_group .actives{
		color:white;
		background: #FF9800;
		border:none;
		border:1px solid #FF9800;
	}
	.time_group{
		width: 80%;
		margin-left: 10%;
		float: left;
	}
	.time_group .picker{
		width: 25%;
		height: 50px;
		float: left;
		line-height: 50px;
		border: 2px solid #ccc;
	}
	.time_group .picker .uni-input{
		text-align: center;
		padding: 0;
	}
	.line{
		float: left;
		padding: 0 10px;
	}
	footer{
		line-height: 90px;
		font-size: 30px;
		background: #ffd11a;
	}
</style>
